import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:pull_to_refresh/pull_to_refresh.dart';
import 'package:yp/config/config.dart';
import 'package:yp/pages/mall_app/help/input.dart';
import 'package:yp/pages/mall_app/help/state.dart';
import 'package:yp/router.dart';

import '../../../helper.dart';
import 'logic.dart';

class HelpPage extends StatefulWidget {
  @override
  _HelpPageState createState() => _HelpPageState();
}

class _HelpPageState extends State<HelpPage> with TickerProviderStateMixin {
  final logic = Get.put(HelpLogic());
  final HelpState state = Get.find<HelpLogic>().state;
  TabController tabCtrl;

  @override
  void initState() {
    super.initState();
    logic.tabsChanged = () {
      tabCtrl = TabController(length: state.groupInfos.length, vsync: this);
      setState(() {});
      tabCtrl.addListener(() {
        if (tabCtrl.indexIsChanging) {
          if (tabCtrl.previousIndex != tabCtrl.index) {
            logic.tabChanged(tabCtrl.index);
          }
        }
      });
    };
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: NestedScrollView(
          headerSliverBuilder: (context, _) {
            return [
              SliverAppBar(
                floating: true,
                pinned: true,
                centerTitle: true,
                backgroundColor: Colors.white,
                elevation: setWidth(1),
                title: Text(
                  '帮助中心',
                  style: TextStyle(
                    color: Color(0xff020202),
                    fontSize: 17,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                iconTheme: IconThemeData(
                  color: Color(0xff020202),
                ),
              ),
              SliverToBoxAdapter(
                child: Container(
                  color: Colors.white,
                  child: SearchBar(
                    textCtrl: state.textCtrl,
                    hintText: '搜索',
                  ),
                ),
              ),
              tabCtrl == null
                  ? SliverToBoxAdapter()
                  : SliverPersistentHeader(
                      pinned: true,
                      delegate: HelpSliverHeaderDelegate(
                          child: TabBar(
                              isScrollable: true,
                              indicatorColor: Color(0xff222222),
                              indicatorPadding: EdgeInsets.symmetric(
                                  horizontal: setWidth(50)),
                              labelColor: Color(0xff222222),
                              unselectedLabelColor: Color(0xff888888),
                              unselectedLabelStyle:
                                  TextStyle(fontSize: setWidth(28)),
                              labelStyle: TextStyle(fontSize: setWidth(32)),
                              controller: tabCtrl,
                              tabs: state.groupInfos == null
                                  ? []
                                  : state.groupInfos
                                      .map((e) => Tab(
                                            text: e['group_name'],
                                          ))
                                      .toList()))),
            ];
          },
          body: Container(
              color: Colors.white,
              child: tabCtrl == null
                  ? SizedBox()
                  : TabBarView(
                      controller: tabCtrl,
                      children: state.groupInfos
                          .asMap()
                          .map((index, e) => MapEntry(
                              index,
                              SmartRefresher(
                                controller: state.refreshCtrls[index],
                                enablePullDown: true,
                                enablePullUp: true,
                                onLoading: logic.onLoadding,
                                onRefresh: logic.onRefresh,
                                header: CustomHeader(
                                  builder: (BuildContext context,
                                      RefreshStatus mode) {
                                    Widget body;
                                    if (mode == RefreshStatus.completed) {
                                      body = CupertinoActivityIndicator();
                                    }
                                    return Container(
                                      height: 55.0,
                                      child: Center(child: body),
                                    );
                                  },
                                ),
                                child: ListView.separated(
                                    padding: EdgeInsets.symmetric(
                                        horizontal: setWidth(16)),
                                    itemCount: state.contentList.length,
                                    separatorBuilder: (context, index) {
                                      return Divider(
                                        height: 1,
                                        color: Color(0xffeeeeee),
                                      );
                                    },
                                    itemBuilder: (context, index) => InkWell(
                                          onTap: () {
                                            var mod = state.contentList[index];
                                            Get.toNamed(RouteConfig.helpDetail,
                                                arguments:
                                                    mod['content_value']);
                                          },
                                          child: Container(
                                            height: setWidth(90),
                                            child: Row(
                                              mainAxisAlignment:
                                                  MainAxisAlignment
                                                      .spaceBetween,
                                              children: [
                                                Text(
                                                    state.contentList[index]
                                                        ['content_title'],
                                                    style: TextStyle(
                                                      color: Color(0xff222222),
                                                      fontSize: setWidth(26),
                                                    )),
                                                Icon(
                                                  Icons.arrow_forward_ios,
                                                  color: Color(0xffcdcdcd),
                                                  size: setWidth(22),
                                                )
                                              ],
                                            ),
                                          ),
                                        )),
                              )))
                          .values
                          .toList()))),
      floatingActionButton: ClipRRect(
        borderRadius: BorderRadius.circular(setWidth(45)),
        child: Container(
          width: setWidth(660),
          height: setWidth(90),
          child: TextButton(
              onPressed: () {
                Get.toNamed(RouteConfig.opinionFeedback);
              },
              style: TextButton.styleFrom(backgroundColor: Config.mainColor),
              child: Text(
                '意见反馈',
                style: TextStyle(color: Colors.white, fontSize: setWidth(28)),
              )),
        ),
      ),
    );
  }
}

class HelpSliverHeaderDelegate extends SliverPersistentHeaderDelegate {
  HelpSliverHeaderDelegate({this.child});
  final TabBar child;
  @override
  Widget build(
      BuildContext context, double shrinkOffset, bool overlapsContent) {
    return Container(
      height: setWidth(100),
      color: Colors.white,
      child: child,
    );
  }

  @override
  double get maxExtent => child.preferredSize.height;

  @override
  double get minExtent => child.preferredSize.height;

  @override
  bool shouldRebuild(covariant SliverPersistentHeaderDelegate oldDelegate) {
    return false;
  }
}
